<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="_token" content="{!! csrf_token() !!}"/>
    <title>用户列表</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style>
        th,td{text-align: center}
        .info-box{background-color: #fff;  width:265px; height:300px;border-radius: 5px;position: fixed; top: 110px; left: 550px;z-index: 999;text-align: center}
        #dark{width: 100%;height: 100%;position: fixed;background-color: rgba(0, 0, 0, 0.48);}
        span{color:#9d9d9d}
    </style>
    <script>
        window.onload = function ()
        {
                var xhr = new XMLHttpRequest();
                setInterval(aa,1000);
                function aa ()
                {
                    xhr.onreadystatechange = function ()
                    {
                        if (xhr.readyState == 4 && xhr.status == 200)
                        {
                            eval('var res ='+xhr.responseText);
//                            console.log(res);
                            var uname = document.getElementsByClassName('uname');
                            var usex = document.getElementsByClassName('usex');
                            var utel = document.getElementsByClassName('utel');
                            var ubir = document.getElementsByClassName('ubir');
                            for (var i = 0;i < uname.length; i ++ )
                            {
                                (function (i) {
                                    uname[i].innerHTML = res[i]['nickname'];
                                    var sex = res[i]['sex'];
                                    if (sex == 1)
                                    {
                                        sex = '男';
                                    } else {
                                        sex = '女';
                                    }
                                    usex[i].innerHTML = sex;
                                    utel[i].innerHTML = res[i]['tel'];
                                    ubir[i].innerHTML = res[i]['birthday'];
                                })(i);
                            }
//                        uid[0].innerHTML = res[3]['id'];
                        }
                    }
                    xhr.open('get','/userlistp',true);
                    xhr.send();
                }
        }
    </script>
</head>
<body>
<?=csrf_field()?>
<div id="dark" style="display: none"></div>
<table class="table table-hover" align="center">
    <thead align="center">
        <tr>
            <th>id</th>
            <th>昵称</th>
            <th>性别</th>
            <th>手机</th>
            <th>生日</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="tBody">
        <?php foreach ($data as $v):?>
            <tr>
                <td class="uid"><?=$v['id']?></td>
                <td class="uname"><?=$v['nickname']?></td>
                <td class="usex"><?=$v['sex']=='1'?'男':'女'?></td>
                <td class="utel"><?=$v['tel']?></td>
                <td class="ubir"><?=$v['birthday']?></td>
                <td><button class="btn btn-default edit-btn">编辑</button><button class="btn btn-default">删除</button></td>
                <div class="info-box" style="display: none">
                    <form class="form-array">
                        <input type="hidden" name="userid" value="<?=$v['id']?>">
<!--                        <input type="hidden" name="_token" value="{{ csrf_token() }}">-->
<!--                        <br>-->
                        <span>--- 姓名 ---</span>
                        <input type="text" class="form-control nickname" name="nickname" value="<?=$v['nickname']?>" placeholder="Text input">
                        <span>--- 手机 ---</span>
                        <input type="text" class="form-control tel" name="tel" value="<?=$v['tel']?>" placeholder="Text input">
                        <span>--- 生日 ---</span>
                        <input type="date" class="form-control birthday" name="birthday" value="<?=$v['birthday']?>">
                        <span>--- 性别 ---</span>
                        <select name="sex" class="form-control sex">
                            <option value="1" <?=$v['sex']=='1'?'selected':''?>>男</option>
                            <option value="2" <?=$v['sex']=='2'?'selected':''?>>女</option>
                        </select>
                        <br>
                        <input type="button" class="btn btn-default save-btn" value="保存">
                        <input type="button" class="btn btn-default close-btn" value="取消">
                    </form>
                </div>
            </tr>
        <?php endforeach;?>
    </tbody>
</table>
<script>
    //  获取所有编辑按钮
    var editBtn = document.getElementsByClassName('edit-btn');
    //  获取所有编辑面板
    var userInfo = document.getElementsByClassName('info-box');
    //  获取遮罩层
    var darkNess = document.getElementById('dark');
    //  获取所有的取消按钮
    var closeBtn = document.getElementsByClassName('close-btn');
    //  获取所有的保存按钮
    var saveBtn = document.getElementsByClassName('save-btn');
    //  token
    var token = document.getElementsByName('_token');
//    console.log(token[1].value);
    //  获取用户名表单
    var nickName = document.getElementsByClassName('nickname');
    //  获取手机表单
    var tel = document.getElementsByClassName('tel');
    //  获取生日表单
    var birthday = document.getElementsByClassName('birthday');
    //  获取用户id
    var userId = document.getElementsByName('userid');
    //  获取用户性别
    var sex = document.getElementsByName('sex');

    //  编辑按钮事件
    for (var i = 0;i < editBtn.length;i++)
    {
        (function (i){
            //  按钮点击
            editBtn[i].onclick = function ()
            {
                darkNess.style.display = 'block';
                userInfo[i].style.display = 'block';
            }
        })(i);
    }
    //  取消按钮事件
    for (var i = 0; i < editBtn.length; i++ )
    {
        (function (i) {
            closeBtn[i].onclick = function ()
            {
                darkNess.style.display = 'none';
                userInfo[i].style.display = 'none';
            }
        })(i);
    }
    //  保存按钮事件
    for (var i = 0; i < editBtn.length; i++)
    {
        (function (i) {
            saveBtn[i].onclick = function ()
            {
                //  请求ajax
                var xhr = new XMLHttpRequest();
                var data = new FormData();
                data.append('id',userId[i].value)
                data.append('nickName',nickName[i].value);
                data.append('_token',token[1].value);
                data.append('tel',tel[i].value);
                data.append('birthday',birthday[i].value);
                data.append('sex',sex[i].value);
                xhr.onreadystatechange = function ()
                {
                    if (xhr.readyState == 4 && xhr.status == 200)
                    {
                        darkNess.style.display = 'none';
                        userInfo[i].style.display = 'none';
                        console.log(xhr.responseText);
                    }
                }
                xhr.open('post','/userinfo',true);
                xhr.send(data);
            }
        })(i);
    }
</script>
</body>
</html>